<template>
  <div>
    <div class="form_wrap">
      <div>
        <el-input v-model="searchText"></el-input>
        <el-button type="success" @click="toSearch">查询</el-button>
      </div>
      <el-button type="primary" @click="open">添加</el-button>
    </div>
    <el-dialog :title="vtitle" width="40%" :visible.sync="videoFlag">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="视频上传">
          <el-input v-model="videoUrl" disabled></el-input>
          <input @change="getFile($event)" type="file" hidden ref="myfile" />
          <el-button type="primary" @click="openfile()">选择视频</el-button>
        </el-form-item>
        <el-form-item label="视频名称">
          <el-input v-model="Vname"></el-input>
        </el-form-item>
        <el-form-item label="视频时长">
          <el-input v-model="Vtime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="success" @click="sure">{{ Vbtn }}</el-button>
        <el-button type="danger" @click="videoFlag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { _addVideo, uploadVideo, _EditVideo } from '../../api/video'
import { cloneDeep } from '../../utils/tool'
export default {
  data () {
    return {
      vtitle: '添加视频',
      Vbtn: '添加',
      videoFlag: false,
      videoUrl: '',
      Vname: '',
      Vtime: '',
      searchText: '',
      EditId: '' //修改的id
    }
  },
  created () {
    //接受table组件传来的编辑数据
    this.$bus.$on('sendvideo', row => {
      let rows = cloneDeep(row) //深克隆
      this.vtitle = '编辑视频'
      this.Vbtn = '确定修改'
      this.Vname = rows.Vname
      this.Vtime = rows.Vtime
      this.videoUrl = rows.Vurl
      this.EditId = rows.ID //修改的id
      this.videoFlag = true
    })
  },
  methods: {
    toSearch () {
      //触发父组件搜索
      this.$parent.searchText = this.searchText
      this.$parent.getList()
      this.searchText = ''
    },
    openfile () {
      //点击按钮触发文件选择
      this.$refs.myfile.click()
    },
    async getFile (e) {
      //获取文件调用上传接口
      //选择文件
      console.log(e)
      var file = e.target.files[0]
      if (file.size > 500 * 1024 * 1024) {
        this.$message.error('上传的文件不能超过500Mb')
        return
      }
      var formData = new FormData()
      formData.append('' + new Date().getTime(), file)
      var res = await uploadVideo(formData)
      console.log(res)
      this.videoUrl = res.data.cacheName
    },
    async sure () {
      var obj = {
        Vurl: this.videoUrl,
        Vtime: this.Vtime,
        Vname: this.Vname
      }
      if (this.EditId) {
        console.log(this.EditId)
        //编辑接口
        obj.ID = this.EditId
        var EidtRes = await _EditVideo(obj)
        console.log(EidtRes)
        if (EidtRes.data.success) {
          this.$message.success('修改成功')
        }
      } else {
        //添加视频 或修改视频接口
        var res = await _addVideo(obj)
        if (res.data.success) {
          this.$message.success('添加成功')
        }
      }
      this.videoFlag = false
      this.videoUrl = ''
      this.Vname = ''
      this.Vtime = ''
      this.EditId = ''
      this.$parent.getList()
    },
    open () {
      this.videoFlag = true
      this.vtitle = '添加视频'
      this.Vbtn = '添加'
      this.Vname = ''
      this.Vtime = ''
      this.videoUrl = ''
    }
  }
}
</script>
<style lang="less" scoped>
.form_wrap {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
  > div {
    display: flex;
  }
}
</style>
